<template>
  <div>
      <!-- npm install echarts --save -->
      柱状图：
      <div class="total" id="barChart" ref="barChart"></div>
      
      饼图：
      <div class="total" id="pieChart" ref="pieChart"></div>

      多列柱状图：
      <div class="total" id="moreBarChart" ref="moreBarChart"></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar"
// 引入饼状图
import "echarts/lib/chart/pie";

// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";

export default {
    data(){
        return {
            sellAxisData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            sellSeriesData: [5, 20, 36, 10, 10, 20],

            gradeAxisData:['60以下','60-70','70-80','80-90','90以上'],
            gradeSeriesData:[{name:'60以下',value:4},{name:'60-70',value:8},
            {name:'70-80',value:2},{name:'80-90',value:6},{name:'90以上',value:1}],

            petSellData:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            productSellData:[320, 332, 301, 334, 390,270,400,80,300,160,500,480],
            serviceSellData:[220, 182, 191, 234, 290,239,400,120,60,438,180,140]

        }
    },
    methods:{
        showChart(){
            // 销毁之前的实例
                // echarts.dispose(this.$refs.myChart);
                // 重新创建新的实例
                 let barChart = echarts.init(this.$refs.barChart);
                 barChart.setOption(this.sellOptions, true);
                let pieChart = echarts.init(this.$refs.pieChart, 'dark');
                pieChart.setOption(this.gradeOptions, true);
                let moreBarChart = echarts.init(this.$refs.moreBarChart, 'dark');
                moreBarChart.setOption(this.yearOption, true);

        }
    },
    mounted(){
        this.showChart();
    },
    computed:{
        sellOptions(){
             return {
               title: {
                    text: '销售统计'
                },
                tooltip: {},
                xAxis: {
                    data: this.sellAxisData
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: this.sellSeriesData
                }]
            }
        },
        gradeOptions() {
            return {
                title: {
                    text: "各个阶段年龄分布",
                    subtext: "纯属虚构",
                    x: "center"
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                    data: this.gradeAxisData
                },
                series: [
                    {
                        name: "访问来源",
                        type: "pie",
                        radius: "55%",
                        center: ["50%", "60%"],
                        data: this.gradeSeriesData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            };
        },
        yearOption(){
   
            var config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    var labelOption = {
                        normal: {
                            rotate: config.rotate,
                            align: config.align,
                            verticalAlign: config.verticalAlign,
                            position: config.position,
                            distance: config.distance
                        }
                    };
                    myChart.setOption({
                        series: [{
                            label: labelOption
                        }
                        , {
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }
                        ]
                    });
                }
            };

            var labelOption = {
                show: true,
                position: config.position,
                distance: config.distance,
                align: config.align,
                verticalAlign: config.verticalAlign,
                rotate: config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            };

            return {
                color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['商品', '服务']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: this.petSellData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '商品',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        data: this.productSellData
                    },
                    {
                        name: '服务',
                        type: 'bar',
                        label: labelOption,
                        data: this.serviceSellData
                    }
                ]
            }
        }
    }
}
</script>

<style scoped>
.total {
    width: 100%;
    height: 500px;
}
</style>
